<template>
  <div style="width:100vw;height:100vh;overflow:auto">
    <Config
      :form.sync="form"
      :colors.sync="colors"
      @changeColor="changeColor"
      @changeLine="changeLine"
      @changeBgColor="changeBgColor"
    />
    <el-button @click="handleClick">点击</el-button>
    <el-button @click="handleCancel">取消</el-button>

    <Map :points="point" :lights="light" :bars="bar" ref="map" />
  </div>
</template>

<script>
import Map from "@/package/Map";
import Config from "@/components/config/Config";
import { colors } from "@/utils/config";
import { getRandomItems } from "@/utils/index";
import { data } from "./data";
console.log(
  data.map(item => {
    return {
      ...item,
      bar: { value: item.bar, total: 200 }
    };
  })
);
export default {
  components: {
    Map,
    Config
  },
  data() {
    return {
      point: getRandomItems(data, 5),
      bar: getRandomItems(data, 5),
      light: [],
      form: {},
      colors: colors
    };
  },
  methods: {
    handleClick() {
      this.light = data;
    },
    handleCancel() {
      this.light = [];
    },

    addBar(state) {
      this.$refs.map["addBar"](state);
    },
    changeColor(color, name, index) {
      this.$refs.map["changeColor"](color, name, index);
    },
    changeLine(linewidth) {
      this.$refs.map["changeLine"](linewidth);
    },
    changeBgColor(color) {
      this.$refs.map["changeBgColor"](color);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>